<template>
    <div class="quesItem">  
        <!-- {{ showData }} -->
        <el-row class="test-stem mr10">
            <strong class="queNum">题目.</strong>
        <!-- <pre>在Spring Boot工程中，关于application.properties配置文件，以下说法中哪些是正确的？</pre> -->
        <pre>{{ showData.question_stem }}</pre>
        <pre></pre>
        </el-row>
        <el-row class="test-option mr10">
              <el-radio-group v-model="showData.test_answer"   v-if ="showData.type=='单选题'" v-for="(item,index) in showData.option_settings" disabled>
                <el-radio :value="'选项' + String.fromCharCode(65 + index)" >{{String.fromCharCode(65+index) +":"+ item }}</el-radio>
              </el-radio-group>  
              <el-checkbox-group v-model="showData.test_answer"   v-else-if ="showData.type=='多选题'" v-for="(item,index) in showData.option_settings" disabled>
                <el-checkbox  :value="'选项'+String.fromCharCode(65+index)">{{String.fromCharCode(65+index) +":"+ item }}</el-checkbox>
              </el-checkbox-group>  
        </el-row>
      
    <el-row class="test-footer radiosBoxs mr10">
         <pre><strong>答案:</strong>{{ showData.test_answer }} </pre>
        <!-- <div v-html="showData.test_answer" style="white-space: pre-wrap" v-if="showData.type='问答题'"></div> -->
        <div style="margin-top: 5px; display:inline-block;">
        <el-text >
           <strong>答案解析:</strong>{{  showData.answer_analysis}}</el-text>
        </div>
        </el-row>
    </div>
</template>

<script setup>
import { ref,toRefs } from 'vue'
const radio1 = ref('A')
const props = defineProps({
    showData:Object
})
const {showData } = toRefs(props)
const emit = defineEmits(['update:showData'])
console.log(showData,'showData....')
</script >
<style lang="less" scoped>
.queItem pre{
    flex: 1;
    background: rgba(0,10,32,.05);
    padding: 5px 10px;
    color: #000;
    line-height: 1.6;
    font-size: 14px;
    border-radius: 3px;
}
.test-stem{
    display: flex;
    padding: 5px 5px;
    text-align: center;
    background-color: #f3f3f3;
}

.queItem .queNum {
    width: 40px;
    text-align: right;
    padding-right: 10px;
}
.el-radio{
    margin-right: 5px;
}
.el-radio, .el-radio__input {
    line-height: 1;
    white-space: nowrap;
    outline: 0;
}
//选项的样式
.test-option{
  padding-left: 40px;
  .el-radio{
    width: 150px;
  }
  .el-checkbox{
    width: 150px;
  }
  
}
.radiosBoxs {
    padding: 10px 0 5px;
    width: auto;
    display: inline-block;
}
.test-footer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 5px;
    text-align: left;
    background-color: #f3f3f3;
}
.mr10{
    margin-bottom: 10px;
}
</style>